@props([
    'book'
])
<a wire:navigate href="{{route('book',['book'=>$book->id])}}" >
<div class="flex flex-col rounded-md overflow-hidden transition ease-in-out duration-300 hover:-translate-y-1 cursor-pointer" wire:key="{{$book->id}}">
    <div class="h-[280px] w-full group relative">
        @if ($book->img)
             <image class="h-full w-full object-cover border-none" wire:ignore src="{{\Illuminate\Support\Facades\Storage::url($book->img)}}"></image>
        @else
            <image class="h-full w-full object-cover border-none" src="/images/daohang.jpg"></image>
        @endif
{{--        <div class="absolute inset-0 bg-zinc-800 bg-opacity-50 opacity-0 group-hover:opacity-80 transition-opacity flex items-center justify-center">--}}
{{--            <!-- Content for the overlay, if needed -->--}}
{{--            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-white">--}}
{{--                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />--}}
{{--            </svg>--}}

{{--        </div>--}}
            <div class="absolute right-2 bottom-2 bg-black text-white p-1 rounded-md">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>

            </div>
    </div>
    <div class="flex justify-between items-center">
        <div class="flex flex-col p-4 pb-0">
            <div @class([
                                    'text-white font-bold text-[18px]'
                                ])> {{$book->title}}</div>
            <div class="text-gray-400 my-3 text-[14px]"> {{$book->author}}</div>
        </div>
        <div class="flex pr-2 gap-1 items-start">


        </div>
    </div>
</div>

</a>
